<div class="content-section introduction">
    <div>
        <span class="feature-title">MegaMenu</span>
        <span>MegaMenu displays submenus of root items together.</span>
    </div>
</div>

<div class="content-section implementation">
    <h3 class="first">Default</h3>
    <p-megaMenu [model]="items"></p-megaMenu>
    
    <h3>Vertical</h3>
    <p-megaMenu [model]="items" orientation="vertical"></p-megaMenu>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;MegaMenuModule&#125; from 'primeng/primeng';
</code>
</pre>

<h3>MenuModel API</h3>
<p>MegaMenu uses the common menumodel api to define its items, visit <a [routerLink]="['/menumodel']">MenuModel API</a> for details.</p>

<h3>Getting Started</h3>
<p>MegaMenu requires nested menuitems as its model where the items of a root menuitem is a two dimensional array to define columns in an overlay submenu.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-megaMenu [model]="items"&gt;&lt;/p-megaMenu&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
    export class MegaMenuDemo &#123;

        items: MenuItem[];

        ngOnInit() &#123;
            this.items = [
                &#123;
                    label: 'TV', icon: 'fa-check',
                    items: [
                        [
                            &#123;
                                label: 'TV 1',
                                items: [&#123;label: 'TV 1.1'&#125;,&#123;label: 'TV 1.2'&#125;]
                            &#125;,
                            &#123;
                                label: 'TV 2',
                                items: [&#123;label: 'TV 2.1'&#125;,&#123;label: 'TV 2.2'&#125;]
                            &#125;
                        ],
                        [
                            &#123;
                                label: 'TV 3',
                                items: [&#123;label: 'TV 3.1'&#125;,&#123;label: 'TV 3.2'&#125;]
                            &#125;,
                            &#123;
                                label: 'TV 4',
                                items: [&#123;label: 'TV 4.1'&#125;,&#123;label: 'TV 4.2'&#125;]
                            &#125;    
                        ]
                    ]
                &#125;,
                &#123;
                    label: 'Sports', icon: 'fa-soccer-ball-o',
                    items: [
                        [
                            &#123;
                                label: 'Sports 1',
                                items: [&#123;label: 'Sports 1.1'&#125;,&#123;label: 'Sports 1.2'&#125;]
                            &#125;,
                            &#123;
                                label: 'Sports 2',
                                items: [&#123;label: 'Sports 2.1'&#125;,&#123;label: 'Sports 2.2'&#125;]
                            &#125;,

                        ],
                        [
                            &#123;
                                label: 'Sports 3',
                                items: [&#123;label: 'Sports 3.1'&#125;,&#123;label: 'Sports 3.2'&#125;]
                            &#125;,
                            &#123;
                                label: 'Sports 4',
                                items: [&#123;label: 'Sports 4.1'&#125;,&#123;label: 'Sports 4.2'&#125;]
                            &#125;
                        ],
                        [
                            &#123;
                                label: 'Sports 5',
                                items: [&#123;label: 'Sports 5.1'&#125;,&#123;label: 'Sports 5.2'&#125;]
                            &#125;,
                            &#123;
                                label: 'Sports 6',
                                items: [&#123;label: 'Sports 6.1'&#125;,&#123;label: 'Sports 6.2'&#125;]
                            &#125;
                        ]
                    ]
                &#125;
            ];
        &#125;
    &#125;
</code>
</pre>

<h3>Custom Content</h3>
<p>Custom content can be placed between p-megaMenu tags. Megamenu should be horizontal for custom content.</p>

<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-megaMenu [model]="items"&gt;
    &lt;input type="text" pInputText placeholder="Search"&gt;
    &lt;button pButton label="Logout" icon="fa-sign-out"&gt;&lt;/button&gt;
&lt;/p-megaMenu&gt;
</code>
</pre>


<h3>Properties</h3>
<div class="doc-tablewrapper">
    <table class="doc-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>model</td>
                <td>array</td>
                <td>null</td>
                <td>An array of menuitems.</td>
            </tr>
            <tr>
                <td>orientation</td>
                <td>string</td>
                <td>horizontal</td>
                <td>Defines the orientation, valid values are horizontal and vertical.</td>
            </tr>
            <tr>
                <td>style</td>
                <td>string</td>
                <td>null</td>
                <td>Inline style of the component.</td>
            </tr>
            <tr>
                <td>styleClass</td>
                <td>string</td>
                <td>null</td>
                <td>Style class of the component.</td>
            </tr>
        </tbody>
    </table>
</div>

<h3>Styling</h3>
<p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
<div class="doc-tablewrapper">
    <table class="doc-table">
        <thead>
        <tr>
            <th>Name</th>
            <th>Element</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>ui-megamenu</td>
            <td>Container element.</td>
        </tr>
        <tr>
            <td>ui-menu-list</td>
            <td>List element.</td>
        </tr>
        <tr>
            <td>ui-menuitem</td>
            <td>Menuitem element.</td>
        </tr>
        <tr>
            <td>ui-menuitem-text</td>
            <td>Label of a menuitem.</td>
        </tr>
        <tr>
            <td>ui-menuitem-icon</td>
            <td>Icon of a menuitem.</td>
        </tr>
        <tr>
            <td>ui-submenu-icon</td>
            <td>Arrow icon of a submenu.</td>
        </tr>
        </tbody>
    </table>
</div>

<h3>Dependencies</h3>
<p>None.</p>
</p-tabPanel>

<p-tabPanel header="Source">
    <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/megamenu" class="btn-viewsource" target="_blank">
        <i class="fa fa-github"></i>
        <span>View on GitHub</span>
    </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-megaMenu [model]="items"&gt;&lt;/p-megaMenu&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class MegaMenuDemo &#123;

    items: MenuItem[];

    ngOnInit() &#123;
        this.items = [
            &#123;
                label: 'TV', icon: 'fa-check',
                items: [
                    [
                        &#123;
                            label: 'TV 1',
                            items: [&#123;label: 'TV 1.1'&#125;,&#123;label: 'TV 1.2'&#125;]
                        &#125;,
                        &#123;
                            label: 'TV 2',
                            items: [&#123;label: 'TV 2.1'&#125;,&#123;label: 'TV 2.2'&#125;]
                        &#125;
                    ],
                    [
                        &#123;
                            label: 'TV 3',
                            items: [&#123;label: 'TV 3.1'&#125;,&#123;label: 'TV 3.2'&#125;]
                        &#125;,
                        &#123;
                            label: 'TV 4',
                            items: [&#123;label: 'TV 4.1'&#125;,&#123;label: 'TV 4.2'&#125;]
                        &#125;    
                    ]
                ]
            &#125;,
            &#123;
                label: 'Sports', icon: 'fa-soccer-ball-o',
                items: [
                    [
                        &#123;
                            label: 'Sports 1',
                            items: [&#123;label: 'Sports 1.1'&#125;,&#123;label: 'Sports 1.2'&#125;]
                        &#125;,
                        &#123;
                            label: 'Sports 2',
                            items: [&#123;label: 'Sports 2.1'&#125;,&#123;label: 'Sports 2.2'&#125;]
                        &#125;,

                    ],
                    [
                        &#123;
                            label: 'Sports 3',
                            items: [&#123;label: 'Sports 3.1'&#125;,&#123;label: 'Sports 3.2'&#125;]
                        &#125;,
                        &#123;
                            label: 'Sports 4',
                            items: [&#123;label: 'Sports 4.1'&#125;,&#123;label: 'Sports 4.2'&#125;]
                        &#125;
                    ],
                    [
                        &#123;
                            label: 'Sports 5',
                            items: [&#123;label: 'Sports 5.1'&#125;,&#123;label: 'Sports 5.2'&#125;]
                        &#125;,
                        &#123;
                            label: 'Sports 6',
                            items: [&#123;label: 'Sports 6.1'&#125;,&#123;label: 'Sports 6.2'&#125;]
                        &#125;
                    ]
                ]
            &#125;,
            &#123;
                label: 'Entertainment', icon: 'fa-child',
                items: [
                    [
                        &#123;
                            label: 'Entertainment 1',
                            items: [&#123;label: 'Entertainment 1.1'&#125;,&#123;label: 'Entertainment 1.2'&#125;]
                        &#125;,
                        &#123;
                            label: 'Entertainment 2',
                            items: [&#123;label: 'Entertainment 2.1'&#125;,&#123;label: 'Entertainment 2.2'&#125;]
                        &#125;
                    ],
                    [
                        &#123;
                            label: 'Entertainment 3',
                            items: [&#123;label: 'Entertainment 3.1'&#125;,&#123;label: 'Entertainment 3.2'&#125;]
                        &#125;,
                        &#123;
                            label: 'Entertainment 4',
                            items: [&#123;label: 'Entertainment 4.1'&#125;,&#123;label: 'Entertainment 4.2'&#125;]
                        &#125;    
                    ]
                ]
            &#125;,
            &#123;
                label: 'Technology', icon: 'fa-gears',
                items: [
                    [
                        &#123;
                            label: 'Technology 1',
                            items: [&#123;label: 'Technology 1.1'&#125;,&#123;label: 'Technology 1.2'&#125;]
                        &#125;,
                        &#123;
                            label: 'Technology 2',
                            items: [&#123;label: 'Technology 2.1'&#125;,&#123;label: 'Technology 2.2'&#125;]
                        &#125;,
                        &#123;
                            label: 'Technology 3',
                            items: [&#123;label: 'Technology 3.1'&#125;,&#123;label: 'Technology 3.2'&#125;]
                        &#125;
                    ],
                    [
                        &#123;
                            label: 'Technology 4',
                            items: [&#123;label: 'Technology 4.1'&#125;,&#123;label: 'Technology 4.2'&#125;]
                        &#125;  
                    ]
                ]
            &#125;
        ];
    &#125;
&#125;
</code>
</pre>
</p-tabPanel>
</p-tabView>
</div>